<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { Table, TableColumn } from '@/components/Table'
import { ElDatePicker } from 'element-plus'

import { useSearch } from '@/hooks/web/useSearch'
import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, unref, computed } from 'vue'
import { getUserKeepApi, getAllPartnerApi } from '@/api/user'
import { useI18n } from '@/hooks/web/useI18n'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

const { t } = useI18n()

//formSchema
const channel = ref<any>()
const getAllPartner = async () => {
  const { data } = await getAllPartnerApi()
  channel.value = data.map((item) => {
    return {
      label: item.userName,
      value: item.id
    }
  })
}
getAllPartner()
const disableCache = (time: any) => {
  const today = new Date()
  const oneMonthAgo = new Date()
  oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1)

  return time.getTime() > today.getTime() || time.getTime() < oneMonthAgo.getTime()
}
const { searchRegister, searchMethods } = useSearch()
const { getFormData: getSearchFormData } = searchMethods

const schema = computed<FormSchema[]>(() => [
  {
    field: 'date',
    label: '日期筛选',
    component: 'DatePicker',
    formItemProps: {
      slots: {
        default: (formData) => {
          return (
            <ElDatePicker
              v-model={formData.date}
              type="date"
              valueFormat="YYYY-MM-DD"
              disabledDate={disableCache}
            />
          )
        }
      }
    }
  },
  {
    field: 'creator',
    label: '渠道',
    component: 'Select',
    componentProps: {
      options: channel.value
    }
  }
])
//Table

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const searchFormData = await getSearchFormData()
    const { data, count } = await getUserKeepApi({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize),
      recordId: userStore.getAppId,
      userId: userStore.userInfo.id,
      ...searchFormData
    })
    return {
      list: data,
      total: count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'date',
    label: '日期'
  },
  {
    field: 'total',
    label: '新增用户'
  },
  {
    field: 'one',
    label: '1天后'
  },
  {
    field: 'two',
    label: '2天后'
  },
  {
    field: 'three',
    label: '3天后'
  },
  {
    field: 'four',
    label: '4天后'
  },
  {
    field: 'five',
    label: '5天后'
  },
  {
    field: 'six',
    label: '6天后'
  },
  {
    field: 'seven',
    label: '7天后'
  },
  {
    field: 'fourteen',
    label: '14天后'
  },
  {
    field: 'thirty',
    label: '30天后'
  }
])
</script>

<template>
  <ContentWrap title="留存情况">
    <Search :schema="schema" @search="getList" @reset="getList" @register="searchRegister" />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      headerAlign="center"
      align="center"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
